<template>
  <div class="xgym">
    <p style="text-align: center; margin-top: 15px">
      <span style="font-weight: 700; font-size: 28px; color: #000"
        >新冠疫苗接种记录</span
      >
    </p>
    <table class="tab_sty_3" cellspacing="0" style="width: 100%">
      <tr>
        <th>证件类型</th>
        <td>身份证</td>
        <th>证件号码</th>
        <td style="width: 53%">
          <span
            v-for="(item, index) in 档案号"
            :key="index"
            :class="item == '-' ? 'no_bd' : 'yes_bd'"
            >{{ item }}</span
          >
        </td>
        <th>姓名</th>
        <td>{{ info.residentName }}</td>
        <th>性别</th>
        <td>男</td>
        <th>出生日期</th>
        <td>1974年04月18日</td>
      </tr>
    </table>
    <table class="tab_sty_7" cellspacing="0" style="width: 100%">
      <tr style="margin-top: 30px; display: inline-block;width: 100%;">
        <th>序号</th>
        <th>剂次</th>
        <th>疫苗名称</th>
        <th>疫苗批号</th>
        <th>生产企业</th>
        <th>接种时间</th>
        <th>接种单位</th>
      </tr>
      <tr v-for="item in 3" :key="item">
        <td>{{ item }}</td>
        <td>第{{item}}剂</td>
        <td>新冠疫苗（Vero细胞）</td>
        <td>C202102014</td>
        <td>北京科兴中维</td>
        <td>2021年03月26日</td>
        <td>黎明乡卫生院</td>
      </tr>
    </table>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      info: {},
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
      档案号: "430522197404187818",
    };
  },
  mounted(){
    this.getdata();
  },
  methods:{
    getdata() {
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        this.info = res.data[0];
        this.info.groupType =  [...this.info.groupType.toString()];
        this.info.medicineAllergy =  [...this.info.medicineAllergy.toString()];
       
      });
    },
  }
};
</script>
    
    <style scoped lang="scss">
.xgym {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
  .tab_sty {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 15%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 35%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      font-size: 12px;
      display: inline-block;
      padding: 0px 4px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .tab_sty_3 {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 13%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 20%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      display: inline-block;
      padding: 0px 4px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .tab_sty_7 {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 14.2%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 14.2%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      display: inline-block;
      padding: 0px 4px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .no_bdb {
    td {
      border-bottom: none;
    }
  }
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #fff;
}
::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #fff;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #000;
}
</style>